<template>
    <div>
        <el-select :value="valueTitle" :clearable="clearable" :disabled="disabled" @clear="clearHandle"
            style="width:100%" :placeholder="placeholder">
            <el-option :value="valueTitle" :label="valueTitle">
                <el-tree id="tree-option" ref="selectTree" :accordion="accordion" :data="groupTree"
                    :props="groupTreeProps" :node-key="groupTreeProps.value" :default-expanded-keys="defaultExpandedKey"
                    @node-click="handleNodeClick">
                </el-tree>
            </el-option>
        </el-select>
    </div>
</template>
<script>
    import * as groupService from '@/api/upms/group'
    import {
        mapState,
        mapGetters
    } from 'vuex'
    export default {
        name: "ec-group-tree-select",
        props: {
            /* 初始值 */
            value: {
                type: String,
                required: false,
                default: () => {
                    return "0"
                }
            },
            placeholder: {
                type: String,
                default: "请选择集团"
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            ...mapState('d2admin/user', {
                pk: state => {
                    if (state.info.pkGroup && state.info.pkGroup != '' && state.info.pkGroup != '~') {
                        return state.info.pkGroup
                    }else{
                        return ''
                    }
                }
            }),
            ...mapGetters('d2admin/user', ['userinfo']),
        },
        data() {
            return {
                groupTree: [],
                groupTreeProps: {
                    parent: 'pkFathergroup',
                    value: 'pkGroup',
                    label: 'name',
                    children: 'children',
                },
                timer: null,
                requestSize: 0,
                valueId: this.value, // 初始值
                valueTitle: '',
                defaultExpandedKey: [],
                clearable: true,
                accordion: true
            }
        },
        watch: {
            value() {
                this.valueId = this.value
                if (this.valueId) {
                    this.initHandle()
                } else {
                    console.log("集团选择组件提示：为选择值")
                }
            }
        },
        beforeDestroy() {
            // this.groupTree = []
            // console.log("关闭集团选择数")
            // this.visible = false
            // clearInterval(this.timer)
        },
        mounted() {
            this.setValue()
        },
        methods: {
            // 初始设置默认值
            setValue() {
                // 有值以后设置选中并执行父组件input
                this.setTimer()
                this.valueId = this.value || this.pk
                this.initHandle()
            },
            // 初始化值
            initHandle() {
                // if (!this.valueId) return;
                if (!this.valueId) {
                    console.log("参数无效!", this.valueId)
                    // this.clearHandle()
                    return
                } else {
                    console.log("初始化")
                    this.$nextTick(() => {
                        const tempValueTitle = this.$refs.selectTree.getNode(this.valueId) // 初始化显示
                        this.valueTitle = tempValueTitle ? tempValueTitle.data[this.groupTreeProps.label] : ''
                        this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中
                        this.defaultExpandedKey = [this.valueId] // 设置默认展开
                        this.$emit("input", this.valueId)
                    });
                    this.initScroll()
                }
            },
            // 初始化滚动条
            initScroll() {
                this.$nextTick(() => {
                    let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
                    let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
                    scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
                    scrollBar.forEach(ele => ele.style.width = 0)
                })
            },

            // 切换选项
            handleNodeClick(node) {
                console.log("切换选项")
                this.valueTitle = node[this.groupTreeProps.label]
                this.valueId = node[this.groupTreeProps.value]
                this.$emit('input', this.valueId)
                this.defaultExpandedKey = []
            },
            // 清除选中
            clearHandle() {
                this.valueTitle = ''
                this.valueId = ''
                this.defaultExpandedKey = []
                this.clearSelected()
                this.$emit('input', '')
            },
            // 清除默认
            resetFields() {
                this.valueTitle = ''
                this.valueId = ''
                this.defaultExpandedKey = []
                // this.groupTree = []
                this.clearSelected()
                this.$emit('input', '')
            },
            /* 清空选中样式 */
            clearSelected() {
                let allNode = document.querySelectorAll('#tree-option .el-tree-node')
                allNode.forEach((element) => element.classList.remove('is-current'))
            },
            setTimer() {
                // console.log("【子组件】准备请求数据")
                let that = this
                this.requestSize = 0

                this.timer = setInterval(() => {
                    if (that.requestSize < 5) {
                        // console.log("【子组件】请求数据前")
                        that.getRemoteData()
                        //// console.log("【子组件】请求数据后")
                    }
                }, 500)
            },
            // 查询字典项
            getRemoteData() {

                console.log("加载集团树形组件")
                this.requestSize++
                // 每次先清空上次选择的参数
                groupService.getgroupsimpletree().then(data => {
                    this.requestSize = 100
                    this.visible = true
                    this.groupTree = data;
                    this.initHandle()
                    clearInterval(this.timer)
                });
            },
        }
    }
</script>
<style scoped>
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        max-height: 274px;
        padding: 0;
        overflow: hidden;
        overflow-y: auto;
    }

    .el-select-dropdown__item.selected {
        font-weight: normal;
    }

    ul li>>>.el-tree .el-tree-node__content {
        height: auto;
        padding: 0 20px;
    }

    .el-tree-node__label {
        font-weight: normal;
    }

    .el-tree>>>.is-current .el-tree-node__label {
        color: #409EFF;
        font-weight: 700;
    }

    .el-tree>>>.is-current .el-tree-node__children .el-tree-node__label {
        color: #606266;
        font-weight: normal;
    }
</style>